<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>dojox.grid.Grid - Image Search Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
	<style>
		@import "../resources/Grid.css";
		body {
			font-size: 0.9em;
			font-family: Geneva, Arial, Helvetica, sans-serif;
		}
		.grid {
			height: 30em;
			width: 51em;
			border: 1px solid silver;
		}
		#info { width: 700px; }
	</style>
	<script type="text/javascript" src="../../../dojo/dojo.js" 
		data-dojo-config="debugAtAllCosts: false, isDebug:false, parseOnLoad: true">
	</script>
	<script type="text/javascript">
		dojo.require("dijit.dijit");
		dojo.require("dojox.grid.DataGrid");
		dojo.require("dojo.io.script");
		dojo.require("dojox.rpc.Service");
		dojo.require("dojox.data.ServiceStore");
		dojo.require("dojo.parser");
	</script>
	<script type="text/javascript" src="yahooSearch.js"></script>	
	<script type="text/javascript">
		var service = new dojox.rpc.Service(dojo.moduleUrl("dojox.rpc.SMDLibrary", "yahoo.smd"));
		var store = new YahooStore({ service: service.imageSearch });

		// Define grid structure
		// remove the height from the header image cell / row cells have a default height so there's less adjustment when thumb comes in.
		beforeImageRow = function(inRowIndex, inSubRows){
			inSubRows[0].hidden = (inRowIndex == -1);
		}
		
		var imageLayout = {
			onBeforeRow: beforeImageRow,
			width: 'auto',
			cells: [
				{ name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, get: getImage, formatter: formatImage },
				{ name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, get: getImage, formatter: formatImage },
				{ name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, get: getImage, formatter: formatImage },
				{ name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, get: getImage, formatter: formatImage }
			]
		};
		
		// execute search
		doSearch = function() {
			var value = dojo.byId("searchInput").value;
			grid.filter({ query: value }, true);
		}

		dojo.addOnLoad(function(){
			dojo.query("#searchInput").onkeypress(function(e){
				if(e.keyCode == dojo.keys.ENTER){ doSearch(); }
			});
		});
	</script>
</head>
<body>
	<h3>dojox.grid.Grid - Image Search Test</h3>
	<input id="searchInput" type="text" value="apple">
	<button onclick="doSearch()" style="clear: both;">Search</button>
	<div dojoType="dojox.grid.DataGrid" 
		id="grid" data-dojo-id="grid" class="grid" structure="imageLayout"
		store="store" elasticView="1" query="{ query: 'apple' }" 
		rowSelector="20px">
	</div>
	<br>
	<div id="info">
		<div id="rowCount" style="float: left"></div>
		<div style="float: right">
			<div id="sendInfo" style="text-align: right"></div>
			<div id="receiveInfo" style="text-align: right"></div>
		</div>
	</div>
</body>
</html>
